import * as echarts from '../../ec-canvas/echarts';

let chart = null;

function initChart(canvas, width, height, dpr) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  var option = {
    color: ['#ffa914', '#1ec7b4', '#38acff'],
    tooltip: {//提示框
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow',        // 默认为直线，可选为：'line' | 'shadow'
        lineStyle : {          // 直线指示器样式设置
          color: '#fff',
          width: 2,
          type: 'solid'
        }
      }
    },
    legend: {
      selectedMode:false,//取消图例上的点击事件
      padding: 10, // 图例内边距，单位px，默认各方向内边距为5，
      data: ['第一季度', '第二季度', '第三季度']
    },
    grid: {
       left: 20,
       right:20,
       bottom: 0,
       top: 50,
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisTick: { show:false },
        axisLine: {
          lineStyle: {
            color: '#ededed',//X轴刻度线颜色
          }
        },
        data: ['宝马', '大奔', '保时捷', '路虎', '奥迪', '大众', '凯迪拉克'],
        axisLabel: {
          show: true,
          color: '#666',
          interval: 0,  
          formatter:function(value){  
            var ret = "";//拼接加\n返回的类目项  
            var maxLength = 2;//每项显示文字个数  
            var valLength = value.length;//X轴类目项的文字个数  
            var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
            if (rowN > 1)//如果类目项的文字大于3,  
            {  
                for (var i = 0; i < rowN; i++) {  
                    var temp = "";//每次截取的字符串  
                    var start = i * maxLength;//开始截取的位置  
                    var end = start + maxLength;//结束截取的位置  
                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
                    temp = value.substring(start, end) + "\n";  
                    ret += temp; //凭借最终的字符串  
                }  
                return ret;  
            }  
            else {  
                return value;  
            }  
          } 
        }
      }
    ],
    yAxis: [{
      x: 'center',
        type: 'value',
        axisTick: { show:false },//为true时显示刻度线， 为false隐藏刻度线
         axisLine: {
           lineStyle: {
             color: '#ededed'
           }
         },
        splitLine :{    //网格线
          lineStyle:{
            type:'dashed',    //设置网格线类型 dotted：虚线   solid:实线
            color:'#ededed'  //网格线颜色
          },
          show:true //隐藏或显示   false时隐藏网格线
        },
         axisLabel: {
           show: true,
           color: '#666'
         }
      }
    ],
    series: [
      {
        name: '第一季度',
        type: 'line',
        smooth: true,//关键点，为true是不支持虚线的，实线就用true
        data: [300, 270, 340, 374, 300, 320, 310],
      },
      {
        name: '第二季度',
        smooth: true,
        type: 'line',
        data: [120, 102, 141, 174, 190, 250, 220]
      },
      {
        name: '第三季度',
        smooth: true,
        type: 'line',
        data: [20, 132, 221, 314, 90, 230, 110]
      }
    ]
  };

  chart.setOption(option);
  return chart;
}

Page({
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/index/index',
      success: function () { },
      fail: function () { }
    }
  },
  data: {
    ec: {
      onInit: initChart
    }
  },

  onReady() {
    setTimeout(function () {
      // 获取 chart 实例的方式
      // console.log(chart)
    }, 2000);
  }
});
